Milk Theme for phpBB 3.2

Installation & Configuration documentation

Contents

  4. Support
  5. Changelog

Thanks for buying the Milk Theme - we think you made a great choice. This documentation should cover everything you need to install and configure the Theme for your forum. If you need any extra help, find a bug, or would like to submit a feature request, please feel free to contact us - we're very friendly :)

- PlanetStyles Team

How to Install Milk Theme #back to top

Setup Information

The Milk Theme requires our free FlightDeck Extension in order to configure the theme options (included in download). Therefore there are 2 parts to the installation process:

  1. Install & enable the required extension ("FlightDeck")
  2. Install & enable the Milk Theme

Note: We offer an affordable installation service for customers wanting help installing the Milk Theme. Email missioncontrol@planetstyles.net for more info.


How to install the FlightDeck extension

Uploading the extension files
  1. Download Milk Theme
  2. Locate folder "milk.zip" and extract to your desktop
  3. Open the folder corresponding to the phpBB version you're using
  4. Open folder "2. Extension Files"
  5. Using either FTP or a File Manager, upload the "planetstyles" folder to: /yourdomain.com/phpBB/ext/

    Note:Your file path should now look like this: /yourdomain.com/phpBB/ext/planetstyles/flightdeck/
Enabling the extension
  1. Navigate to: ACP (Admin Control Panel) → "Customise" (tab)
  2. Below "Disabled Extensions", locate: "PlanetStyles Flight Deck (v2)"
  3. Click "Enable" and confirm
  4. Important: Browse to ACP Home and click "Run Now" next to "Purge Cache". (This is necessary to allow colour picker to function correctly).


How to install the Milk Theme

Uploading the Theme Files
  1. Download Milk Theme
  2. Locate folder "milk.zip" and extract to your desktop
  3. Open the folder corresponding to the phpBB version you're using
  4. Open folder "1. Theme Files"
  5. Using either FTP or a File Manager, upload the "milk" folder to: /yourdomain.com/phpBB/styles/
Enabling the Theme
  1. Navigate to: ACP (Admin Control Panel) → "Customise" (tab)
  2. In the left sidebar, click "Install Styles"
  3. Locate: "Milk v2"
  4. Click "Install style" and confirm
Set Milk as default style
  1. Navigate to: ACP (Admin Control Panel) → "General" (tab)
  2. In the left sidebar, click "Board Settings"
  3. Change "Default Style" to "Milk"
  4. Navigate to: ACP (Admin Control Panel) → Customise (tab)
  5. In the left sidebar, click "Styles"
  6. Optional: Deactivate any other styles to move existing users on other styles onto the Milk Theme

Configuring Theme Options #back to top

The following sections outline the configurable options in the Milk Theme.

All options are configured in: ACP (Admin Panel) → Extensions (tab) → Flight Deck (Control Panel) → Theme Settings

Logo settings #back to top

Uploading a logo - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Logo image upload" , click "Browse"
  3. Select your logo file from your computer
  4. If changing a logo, ensure the "logo location" filed is empty
  5. Optional: Enter height and width
    Tip: Set the height & width to 50% of your logo's actual size to ensure a crisp display on retina devices.
  6. Click Submit

Revert to the default logo - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Empty the value from the "Logo location" field
  3. Click Submit

Removing the logo - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Set "Header Structure" option to "Text Only"
  3. Click Submit

Changing logo position - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Set "Logo position" option to "Left", "Right" or "Middle"
  3. Click Submit

Header settings #back to top

Uploading a custom header background - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Header background upload" , click "Browse"
  3. Select your header image file from your computer
  4. If changing a header, ensure the "header location" filed is empty
  5. Optional: Set background repeat / position / size properties in the options below.
  6. Click Submit

Removing custom header image- #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Empty the value from the "Header image location" field
  3. Click Submit

Customisable Header Options - #back to top

These Options can be found by scrolling down, under "Style Options"

  1. Background Repeat: Defines which direction the background image repeats (note: Not applicable if the 'stretch' option is enabled below). Options:
    • repeat-x: left &right
    • repeat-y: up & down
    • repeat: left & right & up & down
    • no-repeat: Header doesn't repeat
  2. Stretch header to fill space? : If using a non-repeating background, this option can be used for stretching the background image to fill the header space.
  3. Background Position: Defines the background image's starting position (note: Not applicable if the 'stretch' option is enabled below).
  4. Header Overlay: Allows you to either darken the header, or apply a translucent layer of colour to match the theme preset. It is generally recommended to use the dark overlay when using the dark preset.

Parallax and Particle Header Features #back to top

Milk v2 includes 2 new features for the header:

Parallax Header - #back to top

Scrolls the header background image as the page is scrolling.

Important: In order for this feature to work, the header background source image must be taller than the vertical height of the header bar.

To Enable:

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Parallax Header" , click "Yes"
  3. Click Submit.

Animated Particle Header - #back to top

Adds animated particles to the header background. This feature is interactive and reacts when the mouse hovers over or clicks on the header.

To Enable:

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Animated Particle Header" , click "Yes"
  3. Click Submit.

Header Structure Options #back to top

Choosing Logo / Text Format

There are 3 formats to choose from.

Logo Only

Sitename and Description Only

Both

Setting header structure - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Set "Header Structure" option to either:
    • Logo Only
    • Text Only
    • Logo and Text
  3. Click Submit


Choosing Navbar Position

There are 2 locations to choose from:

Outside Header

Inside Header

Setting navbar position - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Set "Navbar Position" option to either:
    • Inside Header
    • Outside Header
  3. Click Submit

Boxed / Fluid Layout #back to top

There are 2 width settings available in Milk:

Fluid Width - #back to top

Fills the full space available in the browser.

To Enable:

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Layout Type" , click "Fluid"
  3. Click Submit.

Boxed - #back to top

Fixed 1200px width. On mobiles and tablets this setting will fill the viewport rather than remain at 1200px.

To Enable:

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Layout Type" , click "Boxed"
  3. Click Submit.

Colour Settings #back to top

The default colour in Milk is bright Blue. However, the flightdeck extension allows you to set your own solid accent colour, or choose from a lively preset.

Setting a custom (solid) accent colour - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Theme Preset Colour", select "Custom (Use colour picker below)"
  3. Use the colour picker to choose your colour:
  4. Click Submit

Choosing a Preset

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Theme Preset Colour", select the name of the preset you'd like to enable.
  3. Previews for each preset are featured below.
  4. Click Submit

Forumlist Options #back to top

There are 3 forumlist display options in Milk:

List - #back to top

Traditional vertical layout.

To Enable:

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Forumlist Display" , click "List"
  3. Click Submit.

List (Simplified) - #back to top

Traditional vertical layout. 'Topics' column has been removed. 'Posts' column is much wider with larger numbers.

To Enable:

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Layout Type" , click "List (Simplified)"
  3. Click Submit.

Grid - #back to top

Forums are displayed in a grid. It is recommended to use the 'forum image' feature to enhance the visual display of this layout.

To Enable:

  1. Open FlightDeck Extension (Control Panel)
  2. Next to "Layout Type" , click "Grid"
  3. Click Submit.

Sidebar Settings

Milk v2 Supports 2 sidebars (left, right or both). They are fixed width and set at the following dimensions:

Left Sidebar: 120px. Right Sidebar: 300px.

Enable Sidebar(s) - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Set "Enable Sidebars" to "Yes"
  3. Next to "Sidebar Placement", choose from either: "Left Only", "Right Only" or "Both".
  4. Click Submit

Edit Sidebar Content - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Scroll to the bottom of the page
  3. Left Sidebar content should be placed in: Custom HTML code block #1. HTML Markup is supported.
  4. Right Sidebar content should be placed in: Custom HTML code block #2. HTML Markup is supported.
  5. Click Submit

Sidebar Content Blocks

Copy & paste the code below to add each to the sidebars.

125 x 125 Grid

<div class="sidebar_widget ad_grid fancy_panel">
    <div class="fancy_panel_padding">
        <h3>Our Friends</h3>
        <div class="sidebar_content">
            <a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
            <a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
            <a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
            <a href="#"><img src="http://i66.tinypic.com/14xgt5l.jpg" /></a>
        </div>
    </div>
</div>

Content Block (matches colour scheme)

<div class="sidebar_widget sidebar_box forabg">
    <div class="inner">
    <ul class="topiclist">
        <li class="header">
            <dl class="row-item">
                <dt>Blank Widget (Inherits Cat. Style)</dt>
            </dl>
        </li>
    </ul>
        <div class="collapse-trigger open">
            <span class="icon fa-minus tooltip-left" title="Collapse"></span>
            <span class="icon fa-plus tooltip-left" title="Expand"></span>
        </div>         
    <ul class="topiclist forums">
		<li class="row">
        	Some information goes here! :)
        </li>    
    </ul>
    </div>
</div>

Content Block (uses dark header)

<div class="sidebar_widget alt_block forabg">
    <div class="inner">
    <ul class="topiclist">
        <li class="header">
            <dl class="row-item">
                <dt>Blank Widget (Alt Block)</dt>
            </dl>
        </li>
    </ul>
        <div class="collapse-trigger open">
            <span class="icon fa-minus tooltip-left" title="Collapse"></span>
            <span class="icon fa-plus tooltip-left" title="Expand"></span>
        </div>         
    <ul class="topiclist forums">
		<li class="row">
        	Some information goes here! :)
        </li>    
    </ul>
    </div>
</div>

Pretty Panel

<div class="sidebar_widget fancy_panel forabg">
    <div class="fancy_panel_padding">
    <h3>Blank Widget (Fancy Panel)</h3>
    <div class="collapse-trigger open">
        <span class="icon fa-minus tooltip-left" title="Collapse"></span>
        <span class="icon fa-plus tooltip-left" title="Expand"></span>
    </div>
    <div class="sidebar_content">
        <p>Some things go here :)</p></div>
    </div>
</div>

Blank

<div class="sidebar_widget">
    Your code here
</div>

Social Bar Settings

Enable the Social Bar - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Set "Enable Social Bar" to "Yes"
  3. Click Submit

Adding Social Icons - #back to top

The Social Icons are powered by FontAwesome library.

  1. Open FlightDeck Extension (Control Panel)
  2. Enter Social Bar content in "Custom HTML code block #3" textarea, using the following format: 
    <a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-apple"></span></a>
<a href="#"><span class="fa fa-facebook"></span></a>
<a href="#"><span class="fa fa-codepen"></span></a>
<a href="#"><span class="fa fa-google"></span></a>
<a href="#"><span class="fa fa-digg"></span></a>
<a href="#"><span class="fa fa-pinterest-p"></span></a>
  3. Refer to FontAwesome.com/icons/ for a full list of supported icons
  4. Click Submit

Misc. Settings #back to top

Sidebar Profile Widget

Adds a profile widget to the sidebar. Logged out users see a login form.

Enable Profile Widget - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Next to: "Sidebar Profile Widget", click "Yes"
  3. Click Submit


Content Block Headers

Choose whether content block headers should appear as solid blocks of colour or accent stripes.

Block Header - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Next to: "Content Block Headers", click "Block"
  3. Click Submit

Stripe Header - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Next to: "Content Block Headers", click "Stripe"
  3. Click Submit

Scroll to Top Button

Adds a "scroll to top" button in the lower-right corner on long pages.

Enabling Scroll to Top Button - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Set "Enable Scroll to Top" option to either:
    • Yes
    • No
  3. Click Submit

Collapsible Panels

Adds a switch to content blocks allowing the end user to show / hide specific content as per their preferance. The user's choice is stored in their browser.

Enabling Collapsible Panels - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Set "Enable Collapsible Panels" option to either:
    • Yes
    • No
  3. Click Submit

Postprofile Side

'Postprofile' is the section of topic replies that contains the poster's avatar, post count and other poser-specific information. You can choose to display this information on the left or right side of the post.

Left

Right


Setting Postprofile side - #back to top

  1. Open FlightDeck Extension (Control Panel)
  2. Set "Postprofile Side" option to either:
    • Left
    • Right
  3. Click Submit

Help & Support #back to top

We provide help & support to all PlanetStyles Customers with an active support grant.

Please visit our Support Page or email missioncontrol@planetstyles.net

Support for our items includes:
  • * Responding to questions or problems regarding the item and its features
  • * Fixing bugs and reported issues
  • * Providing updates to ensure compatibility with new software versions
Regrettably can't freely assist with the following:
  • * Customisation and installation services
  • * Support for third party software and plug-ins

Version History (Changelog) #back to top

Changelog

                        
						-----------------------------------------------------------------------------------------
						Version 2.0.3 - Apr 7th, 2017 
						-----------------------------------------------------------------------------------------   
                        
                        - [ADD] Dark base colour preset
                        - [ADD] Ability to choose a 'dark' header overlay instead of colour
                        - [ADD] Neon Blue accent colour preset
                        - [ADD] Setting to reposition site logo (left / right / center)
                        
                        - [FIX] Console log error caused by collapsible category function firing when the feature was disabled
                        - [FIX] Uploaded logos can now be any size without throwing it out of alignment
                        
                        - [CHANGE] Appearance of unread notifications in notification dropdown                        
                        - [CHANGE] Reduced height of 'stripe' block headers
                        - [CHANGE] Sidebar profile widget links moved closer to avatar
                        - [CHANGE] Repositioned topic type indicator and changed background colour to inherit from preset. Also reduced font size.
                        - [CHANGE] Removed rounded corners from category headers
                        - [CHANGE] Font colour tweaks
                        - [CHANGE] Header background will now automatically scale in mobile layouts
                        
                                                
                        
						-----------------------------------------------------------------------------------------
						Version 2.0.2 - Feb 1st, 2017 
						-----------------------------------------------------------------------------------------   
                        
                        - [FIX] reCaptcha wasn't visible in some cases
                        - [FIX] Navbar contents escaped the container in boxed layout when navbar set to 'inside header' 
                     
                        
						-----------------------------------------------------------------------------------------
						Version 2.0.1 - January 23rd, 2017 (phpBB 3.2 version)
						-----------------------------------------------------------------------------------------   
                        
                        - [FIX] Responsive forum title alignment
                        - [FIX] Notification and Drop-down menus weren't correctly overlapping main wrapper
                        - [FIX] Register and login buttons weren't displaying the correct background colour when a custom colour was selected via Flightdeck
                        

						- [CHANGE] Set max-width on logo to prevent responsive breakdown.
                        - [CHANGE] Milk now inherits any missing template files (eg: For extensions) from prosilver.
                        
						-----------------------------------------------------------------------------------------
						Version 2.0.0 - January 17th, 2017 (phpBB 3.2 version)
						-----------------------------------------------------------------------------------------   
                        
                        - [REWRITE] Major ground-up re-write for phpBB 3.2
                        
                        - [ADD] Full phpBB 3.2.0 support
                        - [ADD] Feature: Parallax Header
                        - [ADD] Feature: Particle Header
                        - [ADD] Feature: Boxed / Fluid Layout
                        - [ADD] Feature: Colour Presets
                        - [ADD] Feature: Grid Forumlist Display
                        - [ADD] Feature: Customisable Content Block Headers
                        - [ADD] Feature: Option for Left Sidebar, Right Sidebar or Both
                        - [ADD] Feature: Sidebar Profile Widget
                        - [ADD] Extensive Responsive Framework
                        
                        - [ADD] All features from phpBB 3.1 version.
                        
                        - [REMOVE] Oversized footer
                       
                        
                        -----------------------------------------------------------------------------------------
						Version 1.0.3 - January 18th, 2017 (phpBB 3.1 version)
						-----------------------------------------------------------------------------------------   
                                                
                        - [FIX] Replaced missing {$STYLESHEETS} variable required for extension support.                                             
                        
                                                
                        
						-----------------------------------------------------------------------------------------
						Version 1.0.2 - October 17th, 2016
						-----------------------------------------------------------------------------------------   
                        
                        - [ADD] phpBB 3.1.10 Compatibility
                        
                        - [CHANGE] Removed unchanged template files that are inherited from prosilver
                        
                        - [FIX] Highlighted text was became invisible in Firefox                                
                        
						-----------------------------------------------------------------------------------------
						Version 1.0.1.1 - October 1st, 2016
						-----------------------------------------------------------------------------------------   
                        
                        - [FIX] Scale logo in responsive layout
                        - [FIX] Accent colour broken in Firefox                                                                     
                        
						-----------------------------------------------------------------------------------------
						Version 1.0.1 - September 26th, 2016
						-----------------------------------------------------------------------------------------

						- [ADD] Feature: Upload header background + options for setting position / repeat
                        - [ADD] Feature: Header Tint 
                        - [ADD] Feature: Set accent colour by HEX code / colour picker
                        - [ADD] Feature: High contrast footer links
                        - [ADD] Feature: Set Forum width (px or %)
                        - [ADD] Option: Transparent Navbar Background
                        
                        - [CHANGE] Footer Structure
                        
                        - [FIX] Logo was hidden in responsive mode                     

						-----------------------------------------------------------------------------------------
						Version 1.0.0 - May 28th, 2016
						-----------------------------------------------------------------------------------------

						- Initial Release